﻿//$(function () {
//    $(".draggable").draggable();
//    $("#completed").droppable({
//        drop: function (event, ui) {
//            var index = $(this).data("id");
//            alert(index);
//            //$(this)
//            //  .addClass("ui-state-highlight")
//            //  .find("p")
//            //    .html("Dropped!");
//        }
//    });
//});

$(".draggable").draggable({
    helper: function () { return "<div class='ghost'></div>"; },
    start: resizeGhost,
    revert: 'invalid',
    handle: 'span'
});

function resizeGhost(event, ui) {
    var helper = ui.helper;
    var element = $(event.target);
    helper.width(element.width());
    helper.height(element.height());
}

$(".droppable").droppable({
    hoverClass: 'ui-state-active',
    drop: function (event, ui) {
        var target = $(event.target);
        var draggable = ui.draggable;
        //var todoItem = todoArray[draggable.data('id')];
        //todoItem.isCompleted = true;
        //todoItem.completedDate = new Data();
        var c = draggable.clone();
        c.insertAfter(target);
    }
});